<template>
  <view class="order-detail safe-bottom">
    <navigation back title="订单详情" />

    <view class="container">
      <view class="page-container">
        <view class="order-status flex flex-middle flex-between">
          订单状态
          <text class="color1">待使用</text>
        </view>

        <service-info />

        <view class="order-info">
          <view class="line flex flex-middle flex-between">
            <text class="line-title">服务地点</text>
            俊发·盛唐城F区26栋102
          </view>

          <view class="line craftsman flex flex-middle flex-between">
            <text class="line-title">匠人</text>
            <view class="flex flex-middle">
              <image
                class="craftsman-avatar"
                src="@/static/image/common/test.png"
                mode="aspectFill"
              />
              张诗雨
              <view
                class="icon-view flex flex-middle flex-center"
                @click="callPhone"
              >
                <u-icon name="phone-fill" size="16" color="#31BC4E" />
              </view>
              <view
                class="icon-view flex flex-middle flex-center"
                @click="sendMsg"
              >
                <u-icon name="chat-fill" size="16" color="#31BC4E" />
              </view>
            </view>
          </view>

          <view class="line flex flex-middle flex-between">
            <text class="line-title">服务时间</text>
            2025-06-05 17:05:49
          </view>

          <view class="line flex flex-middle flex-between">
            <text class="line-title">订单编号</text>
            4994 2131 2663 213
          </view>

          <view class="line flex flex-middle flex-between">
            <text class="line-title">支付方式</text>
            微信支付
          </view>

          <view class="line flex flex-middle flex-between">
            <text class="line-title">支付时间</text>
            2025-06-05 14:30:23
          </view>
        </view>

        <!-- 操作 -->
        <operate />
      </view>
    </view>
  </view>
</template>

<script>
import serviceInfo from "./components/serviceInfo";
import operate from "./components/operate";

export default {
  components: {
    serviceInfo,
    operate,
  },
  methods: {
    sendMsg() {
      this.$dialog({
        content: "即将开放，敬请期待！",
      });
    },
    callPhone() {
      uni.makePhoneCall({
        phoneNumber: "18187059122",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.color1 {
  color: #fe774c;
}

.color2 {
  color: #979797;
}

.order-status {
  padding-bottom: 12px;
}

.craftsman {
  .icon-view {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #dcfee4;
    margin-left: 12px;
  }

  &-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
  }
}

.container {
  padding: 16px;
  color: #232323;
}

.order-info {
  background: #fff;
  padding: 0 16px;
  border-radius: 8px;
  margin-top: 12px;
  margin-bottom: 22px;

  .line:last-child {
    border-bottom: none !important;
  }

  .line {
    border-bottom: 1px solid #d9d9d9;
    height: 44px;

    &-title {
      color: #979797;
    }
  }
}

.order-detail {
  min-height: 100vh;
  background: #f6f6f6;
}
</style>